
<template>
  <div class="sysscheduled-container">
    <!--    查询表单-->
    <Search ref="search" :SearchConfig="SearchConfig" :searchData="searchData">
      <template #buttons>
        <ButtonGroup :ButtonConfig="ButtonConfig" @reset="reset" @query="query" @openDialog="openDialog" @delete="del" :select-row="selectRow"/>
      </template>
    </Search>
    <!--    数据网格-->
    <div class="data-grid">
      <el-table
          :data="gridData"
          :highlight-current-row="true"
          @row-click="rowClick"
          border
          height="520px"
          style="width: 100%">
        <el-table-column
            type="index"
            fixed
            label="序号"
            width="50">
        </el-table-column>

            <el-table-column
                prop="id"
                width="100"
                label="任务标识"
            >
            </el-table-column>

            <el-table-column
                prop="scheduledName"
                width="150"
                label="任务名"
            >
            </el-table-column>

            <el-table-column
                prop="cron"
                width="170"
                label="执行周期"
            >
            </el-table-column>

            <el-table-column
                width="140"
                label="状态"
            >
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    active-text="启动"
                    inactive-text="停止"
                    @change="startOrStopTask($event,scope.row)"
                    inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column
                prop="beanId"
                width="150"
                label="任务组"
            >
            </el-table-column>

            <el-table-column
                prop="methodName"
                width="150"
                label="任务方法名"
            >
            </el-table-column>

            <el-table-column
                prop="methodParam"
                width="100"
                label="任务参数"
            >
            </el-table-column>

            <el-table-column
                prop="createTime"
                width="150"
                label="创建时间"
            >
            </el-table-column>

            <el-table-column
                prop="createUserName"
                width="100"
                label="创建者"
            >
            </el-table-column>

            <el-table-column
                prop="updateTime"
                width="150"
                label="更新时间"
            >
            </el-table-column>

            <el-table-column
                prop="updateUserName"
                width="100"
                label="更新者"
            >
            </el-table-column>

            <el-table-column
                prop="remark"
                width="120"
                label="备注"
            >
            </el-table-column>
      </el-table>
    </div>

    <!--    分页工具-->
    <page-comp :pageOptions="pageOptions"/>

    <!--    对话框-->
    <add-or-update-dialog @close="handleDialogClose" @submit="submitForm" :options="dialogOptions">
      <template #form>
        <Form ref="form" :form-data="FormData" :form-config="FormConfig"></Form>
      </template>
    </add-or-update-dialog>
  </div>
</template>

<script>
  import PageComp from '@/components/pagination'
  import Search from '@/components/search/index'
  import ButtonGroup from '@/components/ButtonGroup'
  import AddOrUpdateDialog from "@/components/AddOrUpdateDialog/index.vue";
  import Form from '@/components/Form'
  import {list,addTask,stopOrStartTask,deleteTask,updateTask} from "@/api/sysscheduledApi";
  import {SearchConfig,ButtonConfig,FormConfig,FormData,initOptions} from "@/views/system/task/sysscheduled.config";

  export default {
    name: 'SysScheduled',
    components: {PageComp, Search,ButtonGroup,AddOrUpdateDialog,Form},
    dicts: [],
    data() {
      return {
        pageOptions: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pagesizes: [10, 20, 30, 40],
          sizeChangeCallback(pageSize) {
            this.pageSize = pageSize
          },
          currentChangeCallback(currPage) {
            this.currentPage = currPage
          }
        },
        gridData: [],
        searchData: {
                scheduledName: null,
        },
        SearchConfig,
        ButtonConfig,
        FormData,
        FormConfig,
        selectRow: null,
        dialogOptions: {
          title: '',
          isVisitable: false,
          width: '50%',
          type: null
        },
      }
    },
    watch: {
      'pageOptions.currentPage': function (ne,old) {
        this.query()
      },
      'pageOptions.pageSize': function (ne,old){
        this.query()
      }
    },
    methods: {
      query() {
        list(this.searchData,this.pageOptions.currentPage,this.pageOptions.pageSize).then(success => {
          this.gridData = success.data
          this.pageOptions.total = success.total
          this.selectRow = null
        })
      },
      openDialog(tag) {
        if(tag === '1') {
          // add
          this.dialogOptions.title = '添加'
          this.dialogOptions.type = 1
        } else {
          // edit
          this.copyField(this.selectRow,this.FormData)
          this.dialogOptions.title = '编辑'
          this.dialogOptions.type = 0
        }
        this.dialogOptions.isVisitable = true
      },
      handleDialogClose() {
        if (this.dialogOptions.type === 0 || this.dialogOptions.type === 1) {
          this.query()
        } else {

        }
        this.dialogOptions.isVisitable = false
        this.$refs.form.resetFormData()
      },
      del(row) {
        this.$confirm('删除任务同时会停止任务，确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTask(row.id).then(s => {
            this.query()
          })
        }).catch(() => {
          return
        });
      },
      reset() {
        this.$refs.search.resetFields()
      },
      submitForm() {
        this.$refs.form.validate(() => {
          if (this.dialogOptions.type === 1) {
            // 添加
            addTask(this.FormData).then(s => {
              this.handleDialogClose()
            })
          } else if (this.dialogOptions.type === 0) {
            // 编辑
            console.log(this.FormData)
          }
        })
      },
      startOrStopTask(val,row) {
        stopOrStartTask(row.id,val === true ? 1 : 0).then(success => {
          this.query()
        })
      },
      rowClick(row,column,event) {
        this.selectRow = row
      },
    },
    mounted() {
      list().then(success => {
        this.gridData = success.data
        this.pageOptions.total = success.total
      })

      initOptions()
    }
  }
</script>

<style scoped>
  .sysscheduled-container {
    position: relative;
    height: calc(100% - 31px);
  }

  .sysscheduled-container > .data-grid {
    box-sizing: border-box;
    padding: 0 20px 10px 20px;
  }
</style>